// package_01/pages/take-pic-cut/index.js
import WeCropper from '../we-cropper/we-cropper.js'// 页面中引入插件js文件 
const device = wx.getSystemInfoSync(); // 获取设备信息
const width = device.windowWidth; // 获取设备宽，方便设置画布和裁剪框宽度
const height = device.windowHeight; // 获取设备高，方便设置画布和裁剪框高度

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isAuthCamera: true,
    isFront: 'front',
    navHeight: 0,
    cameraIsReady: true,
    isTaking: false,
    // Page.data中准备以下初始数据
    cropperOpt: {
      id: 'cropper', // 用于手势操作的canvas组件标识符
      targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
      pixelRatio: device.pixelRatio, // 传入设备像素比
      width,  // 画布宽度
      height:height-100, // 画布高度
      // scale: 1, // 最大缩放倍数
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      // zoom: 0, // 缩放系数
      cut: {
          // x: (width - 355) / 2, // 裁剪框x轴起点
          // y: (height - 355) / 2, // 裁剪框y轴期起点
          // width: 355, // 裁剪框宽度
          // height: 355 // 裁剪框高度
          x: (width - 290) / 2, // 裁剪框x轴起点
          y: (height - 285) / 2, // 裁剪框y轴期起点
          width: 290, // 裁剪框宽度
          height: 285 // 裁剪框高度
      }
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  // 打开相册
  handleOpenAlbum() {
      const self = this;
      wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success(res) {
              self.setData({ isTaking: true });
              self.data.cropperOpt.src = res.tempFilePaths[0];// 裁剪数据赋值
              self.createCropper(self.data.cropperOpt);// 实例化WeCropper
          }
      })
  },
  // 相机拍照
  handleTakePhoto() {
    const self = this;
    wx.createCameraContext().takePhoto({
        quality: "high",
        success: (res) => {
            self.setData({ isTaking: true });
            self.data.cropperOpt.src = res.tempImagePath;// 裁剪数据赋值
            self.createCropper(self.data.cropperOpt);// 实例化WeCropper
        },
        fail: (err) => {
            console.log(err, 'fail')
        }
    })
  },

  // 摄像头前置后置
  handleChangeFront() {
    this.setData({ isFront: this.data.isFront == 'front' ? 'back' : 'front' });
  },
    // 实例化WeCropper，参数就是完成上述1、2之后的data.cropperOpt
  createCropper(cropperOpt) {
      this.cropper = new WeCropper(cropperOpt)
          .on('ready', (ctx) => {
          })
          .on('beforeImageLoad', (ctx) => {
              wx.showToast({
                  title: '上传中',
                  icon: 'loading',
                  duration: 20000
              })
          })
          .on('imageLoad', (ctx) => {
              wx.hideToast()
          })
  },
  //裁剪插件触发
  touchStart(e) {
      this.cropper.touchStart(e)
  },
  touchMove(e) {
      this.cropper.touchMove(e)
  },
  touchEnd(e) {
      this.cropper.touchEnd(e)
  },
  //点击确认裁剪图片
  getCropperImage() {
    this.cropper.getCropperImage().then(tempFilePath =>{
        if (tempFilePath) {
            // tempFilePath 为裁剪后的图片临时路径
            // 这里实现业务逻辑...   
            console.log(tempFilePath);  
                   
        } else {
            console.log('获取图片地址失败，请稍后重试');
        }
    })
  },
  //点击取消裁剪
  handleCloseCropper() {
    this.setData({ isTaking: false });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})